<template>
  <div class="index">
    <el-container>
      <el-aside class="aside" :class="{expandwidth:expand}">
        <img src="/commom/images/logo.png" class="wikilogo">
        <div class="userinfo" v-if="!expand">
          <h1>AnnKang时光</h1>
          <p>QQ:240046220</p>
          <p>WeChart:18101828359</p>
        </div>
        <div class="menu">
          <h1 class="tip" v-if="!expand">菜单</h1>
          <router-link to="/index/indexinfo" class="item" tag="div">
            <div class="icon-shouye itemlogo"></div>
            <span v-if="!expand">首页</span>
          </router-link>
          <router-link to = "/index/share" class="item" tag="div">
            <div class="icon-wendang itemlogo"></div>
            <span v-if="!expand">个人分享</span>
          </router-link >
          <router-link to = "/index/product" class="item" tag="div">
            <div class="icon-daima itemlogo"></div>
            <span v-if="!expand">项目作品</span>
          </router-link >
          <router-link to = "/index/technology" class="item" tag="div">
            <div class="icon-wendang itemlogo"></div>
            <span v-if="!expand">技术交流</span>
          </router-link >
          <router-link to = "/index/about" class="item" tag="div">
            <div class="icon-personal itemlogo"></div>
            <span v-if="!expand">关于</span>
          </router-link >
          <h1 class="tip" v-if="!expand">产品</h1>
          <router-link to = "/index/wikichart" class="item" tag="div">
            <div class="icon-liaotian itemlogo"></div>
            <span v-if="!expand">wiki即时通讯</span>
          </router-link >
          <router-link to = "/index/wikibiji" class="item" tag="div">
            <div class="icon-biji1 itemlogo"></div>
            <span v-if="!expand">wiki笔记</span>
          </router-link >
          <div class="footer" :class="expand ? 'icon-zhankai' : 'icon-shousuo'" @click="myexpand">

          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <div class="head">
            <div class="search">
              <input type="text" name="" id="" placeholder="搜索">
              <div class="icon-search searchicon"></div>
            </div>
            <div class="user" >
              <span @click="login">登录</span>
              <span @click="out" style="color:red">退出</span>
              <img  v-lazy="userimg" alt="" srcset="" ref="userimages" @click="showinfo">
            </div>
          </div>
          <transition name="Skright">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </el-main>
      </el-container>
    </el-container>
    <login ref="mylogin"
    @isshowlogin = "isshowlogin"></login>
    <userinfo ref="userinfo"
    @isshowlogin = "refesh"
    @imgrefesh = "imgrefesh"></userinfo>
  </div>
</template>

<script>
import login from "../../base/login/login.vue";
import userinfo from "../../base/userinfo/userinfo.vue";
import * as myfunc from "../../commom/js/myfunc"
export default {
  data(){
    return{
      expand:false,
      userimg:""
    }
  },
   watch: {
    $route(to, from) {
      if (to.meta.tx > from.meta.tx) {
        this.SkipSwitchName= "Skright";
      } else {
        this.SkipSwitchName= "Skleft";
      }
    }
  },
  mounted(){
    this.isshowlogin();
  },
  methods:{
    isshowlogin(){//根据本地缓存判断用户是否登录过或还是处于未注册状态
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        this.userimg= this.serverurl+"userimage/default.png";
        setTimeout(()=>{
          this.$refs.mylogin.open();//打开登录界面
          // this.$refs.mylogin.ToRegister();//跳转到注册页面
        },20)
      }else{
        this.userimg= this.serverurl+"userimage/"+value.imgurl;
        console.log(this.userimg)
      }
    },
    refesh(){//根据本地缓存判断用户是否登录过或还是处于未注册状态
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        this.userimg= this.serverurl+"userimage/default.png";
      }else{
        this.userimg= this.serverurl+"userimage/"+value.imgurl;
      }
      // this.$router.go(0);
    },
    imgrefesh(data){
      this.userimg = data;
    },
    myexpand(){//展开收缩
      this.expand = !this.expand;
    },
    login(){//登录
      this.$refs.mylogin.open();
    },
    out(){//退出登录

    },
    showinfo(){
      let value = myfunc.getlocalstorage();
      if(JSON.stringify(value) == "{}"){//本地缓存为空
        alert("无登录信息,请先点击登录")
        return
      }else{
         this.$refs.userinfo.open();
      }   
    }
  },
  components:{
    login,
    userinfo
  }
}
</script>

<style lang="less" scoped>
.index{
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%; 
  .aside{
    width:24rem !important;
    transition: all 0.5s ease;
    overflow: hidden;
    &.expandwidth{
       width:10rem!important;
       padding-left: 3rem !important;
       .item{
         margin-top: 4.0rem !important;
       }
       .wikilogo{
          width: 8.7rem !important;
          height: 8.7rem !important;
       }
    }
  }
  .el-container {
    height: 100%;
    .el-aside {
      background-color: #FFFFFF;
      color: #333;
      padding-top: 13.0rem;
      padding-left: 4.0rem;
      box-sizing: border-box;
      position: relative;
      .wikilogo{
        position: absolute;
        top: 0rem;
        left: 0rem;  
        width: 15.7rem;
        height: 15.7rem;
        display: block;
      }
      .userinfo{
        h1{
          min-width: 20rem;
          color: rgba(16, 16, 16, 100);
          font-size: 2.0rem;
          text-align: left;
          font-family: '方正综艺体-标准';
          line-height: 3.5rem;
        }
        p{
          line-height: 2.2rem;
          color: rgba(158, 158, 158, 100);
          font-size: 1.4rem;
          text-align: left;
          // font-family: SourceHanSansSC-regular;
        }
      }
      .tip{
        color: rgba(158, 158, 158, 100);
        font-size: 1.8rem;
        text-align: left;
        font-family: SourceHanSansSC-regular;
      }
      .menu{
        padding-top: 3.0rem;
        .tip{
            &:last-of-type{
               margin-top: 4.0rem;
            }
          }
        .item{
          margin-top: 2.0rem;
          cursor: pointer;
          min-width: 20rem;
          .itemlogo{
            margin-left: 0.3rem;
            display: inline-block;
            box-sizing: border-box;
            padding: 0.7rem;
            border-radius: 1.2rem;
            background-color: rgba(189, 189, 189, 100);
            text-align: center;
            color: #FFFFFF;
          }
          span{
            margin-left: 2.1rem;
            color: rgba(158, 158, 158, 100);
            font-size: 1.2rem;
            font-family: SourceHanSansSC-bold;
          }
          &.router-link-active{
            .itemlogo{
              margin-left: 0rem;
              padding: 1.0rem;
              background-color: rgba(0, 122, 255, 100);
            }
            span{
              margin-left: 1.8rem;
              color: rgba(74, 71, 71, 100);
              font-size: 1.6rem;
              font-weight: bold;
            }
          }
        }
        .footer{
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 5rem;
          border-top: 1px solid rgb(228, 227, 227);
          background-color:#ffffff;
          text-align: center;
          line-height: 4rem;
          font-size: 2.5rem;
          padding: 0.5rem 0;
          box-sizing: border-box;
          color: #8d8a8a;
          cursor: pointer;
        }
      }
    } 
    .el-main {
      background-color: #F5F5F5;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      clear: both;
      .head{
        display: flex;
        justify-content: space-between;
        // align-items: center;
        .search{
          width: 39.0rem;
          display: inline-block;
          position: relative;
          margin-bottom: 1.0rem;
          input{
            outline: transparent;
            border: 0;
            width: 39.0rem;
            height: 4.0rem;
            line-height: 4.0rem;
            border-radius: 1.9rem;
            box-sizing: border-box;
            padding: 2.0rem;
            font-size: 1.4rem;
          }
          .searchicon{
            position: absolute;
            font-size: 1.8rem;
            right: 1.0rem;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        .user{
          display: flex;
          img{
            display: block;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            cursor: pointer;
            box-sizing: border-box;
            border: 0.2rem solid #34C758;

          }
          span{
            cursor: pointer;
            line-height: 3.5rem;
            margin-right: 2rem;
          }
        }
      }
      
    }
  }
}
.Skright-enter-active,
.Skright-leave-active,
.Skleft-enter-active,
.Sklef-leave-active {
  transition: all 600ms;
}
//先给 所要用的上下层级跳转写一个过渡时间
//然后你就可以发挥自己的想象力来写自己动画了 下面是一个例子
.Skright-enter {
  transform: translate3d(-100%, 0, 0);
}
.Skright-leave-to {
  transform: translate3d(100%, 0, 0);
}
.Skleft-enter {
  transform: translate3d(100%, 0, 0);
}
.Skleft-leave-to {
  transform: translate3d(-100%, 0, 0);
}
</style>